// 创建 实例 里面有 状态（静态的数据），getters(对于状态里面的数据进行筛选过滤)、actions（定义修改状态的方法）
import {defineStore} from "pinia";
import {computed, ref} from 'vue'
// 为什么要有状态管理
// 组件之间共享数据 【props(父传子) emits(子传父)，provide/inject(祖先-后辈传递数据)，状态管理】
// 未来 ...mapStore  解构出来的实例  使用 userStore
const useUserStore = defineStore('user', {
	state: () => {
		return {
			name: 'tom',
			age: 18
		}
	},
	getters: {
		getName(state) {
			return state.name ? state.name : "未知"
		}
	},
	// 定义如何修改数据的函数
	actions: {
		setName(name) {
			this.name = name
		}
	},
	persist: {
		enabled: true,
		strategies: [
			{ // 更高级的策略 进阶用法
				key: "username",// 存到 storage 中的 key 默认就是当前的 store的id
				storage: localStorage, // localStorage  sessionStorage (默认情况)
				paths: ['name'] // 将当前 store中的 name 进行持久化存储，存储到 localStorage 存储的key是 username
			},
			{ // 更高级的策略 进阶用法
				key: "age",// 存到 storage 中的 key 默认就是当前的 store的id
				storage: sessionStorage, // localStorage  sessionStorage (默认情况)
				paths: ['age'] // 将当前 store中的 name 进行持久化存储，存储到 localStorage 存储的key是 username
			},
		]
	}
})


export const useLoginStore = defineStore('login', () => {
		const login = ref() // state
		const getLogin = computed(() => {
			return login ? login : {username: '默认'}
		})// getters
		function setLogin(l) {
			login.value = l
		}

		return {
			login,
			setLogin,
			getLogin
		}
	},
	{
		persist: {
			enabled: true // 将当前 store 实例中所有的状态都 存储到 sessionStorage 中 state 中定义的内容
		}
	})

export default useUserStore